$grid-size-large: 3px;
$default-font-size: $base-font-size;
$white: #fff;
$black: #000;
$break-small: 600px;
$content-width: 35em;

@mixin break-small() {
  @media (min-width: #{ ($break-small) }) {
    @content;
  }
}

.wp-block-gallery,
.blocks-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  // Some themes give all <ul> default margin instead of padding.
  margin: 0;

  .blocks-gallery-image,
  .blocks-gallery-item {
    // Add space between thumbnails, and unset right most thumbnails later.
    margin: 0 0 $grid-size-large 0;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;

    figure {
      margin: 0;
      height: 100%;

      // IE doesn't support flex so omit that.
      @supports (position: sticky) {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
      }
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    // IE doesn't handle cropping, so we need an explicit width here.
    img {
      width: 100%;

      // IE11 doesn't read rules inside this query. They are applied only to modern browsers.
      @supports (position: sticky) {
        width: auto;
      }
    }

    figcaption {
      position: absolute;
      bottom: 0;
      width: 100%;
      max-height: 100%;
      overflow: auto;
      padding: 40px 10px 9px;
      color: $white;
      text-align: center;
      font-size: $default-font-size;
      background: linear-gradient(
        0deg,
        rgba($color: $black, $alpha: 0.7) 0,
        rgba($color: $black, $alpha: 0.3) 70%,
        transparent
      );

      img {
        display: inline;
      }
    }
  }

  // Cropped
  &.is-cropped .blocks-gallery-image,
  &.is-cropped .blocks-gallery-item {
    a,
    img {
      // IE11 doesn't support object-fit, so just make sure images aren't skewed.
      // The following rules are for all browsers.
      width: 100%;

      // IE11 doesn't read rules inside this query. They are applied only to modern browsers.
      @supports (position: sticky) {
        height: 100%;
        flex: 1;
        object-fit: cover;
      }
    }
  }

  &.columns-1 .blocks-gallery-image,
  &.columns-1 .blocks-gallery-item {
    width: 100%;
  }

  // Beyond mobile viewports, we allow up to 8 columns.
  @include break-small {
    // On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
    & .blocks-gallery-image,
    & .blocks-gallery-item {
      &:nth-of-type(odd) {
        margin-right: $grid-size-large;
      }
    }

    & .blocks-gallery-image,
    & .blocks-gallery-item {
      width: calc((100% - #{$grid-size-large}) / 2);
      margin-right: 0;
    }

    @for $i from 3 through 8 {
      &.columns-#{ $i } .blocks-gallery-image,
      &.columns-#{ $i } .blocks-gallery-item {
        width: calc((100% - #{$grid-size-large} * #{$i - 1}) / #{$i});
        margin-right: $grid-size-large;

        // Rules inside this query are only run by Microsoft Edge.
        // Edge miscalculates `calc`, so we have to add some buffer.
        // See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15637241/
        @supports (-ms-ime-align: auto) {
          width: calc((100% - #{$grid-size-large} * #{$i - 1}) / #{$i} - 1px);
        }
      }
    }

    // Unset the right margin on every rightmost gallery item to ensure center balance.
    @for $column-count from 1 through 8 {
      &.columns-#{
        $column-count
        }
        .blocks-gallery-image:nth-of-type(#{ $column-count }n),
      &.columns-#{
        $column-count
        }
        .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
        margin-right: 0;
      }
    }
  }

  // Last item always needs margins reset.
  .blocks-gallery-image:last-child,
  .blocks-gallery-item:last-child {
    margin-right: 0;
  }

  // Apply max-width to floated items that have no intrinsic width.
  &.alignleft,
  &.alignright {
    max-width: $content-width / 2;
    width: 100%;
  }

  // If the gallery is centered, center the content inside as well.
  &.aligncenter {
    .blocks-gallery-item figure {
      justify-content: center;
    }
  }
}
